<template>
	<view class="container">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 错误状态 -->
		<view v-else-if="error" class="error-container">
			<text class="error-text">数据异常，请重试</text>
		</view>

		<!-- 内容区域 -->
		<view v-else>
			<!-- 驾校标题 -->
			<view class="title">{{ schoolInfo.title }}</view>
			<!-- 驾校介绍 -->
			<view class="desc" v-html="schoolInfo.desc"></view>
			<!-- 班次价格 -->
			<view class="price-section">
				<view class="price-title">可选班次</view>
				<view class="price-item" v-for="(item, index) in schoolInfo.prices" :key="index">
					{{ item.name }}：{{ item.price }}元
				</view>
			</view>
			<!-- 二维码区域 -->
			<view class="qrcode-section">
				<view class="qrcode-title">相关二维码</view>
				<view class="qrcode-box">
					<view class="qrcode-item" v-for="(qrcode, index) in schoolInfo.qrcodes" :key="index">
						<image class="qrcode-img" :src="qrcode.url"></image>
						<text class="qrcode-desc">{{ qrcode.desc }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	// 备用测试数据（突发情况时展示）
	const fallbackTestData = {
		title: '测试驾校',
		desc: '这是一所用于测试的驾校，展示突发情况下的备用数据。<br/><br/>该驾校提供多种班次选择，配备专业教练和完善的训练设施，致力于为学员提供优质的驾驶培训服务。',
		prices: [{
				name: '普通班',
				price: '1999'
			},
			{
				name: '速成班',
				price: '2599'
			},
			{
				name: 'VIP定制班',
				price: '3999'
			}
		],
		qrcodes: [{
				url: 'https://picsum.photos/300/300?random=201',
				desc: '测试报名二维码'
			},
			{
				url: 'https://picsum.photos/300/300?random=202',
				desc: '测试咨询二维码'
			}
		]
	};

	// 状态管理
	const schoolInfo = ref(fallbackTestData); // 初始化为测试数据
	const loading = ref(true);
	const error = ref(false);

	// 从本地存储获取选中的驾校信息
	const fetchSelectedSchool = () => {
		try {
			const storedSchool = uni.getStorageSync('selectedDrivingSchool');
			if (storedSchool) {
				// 确保数据格式正确，缺失字段使用测试数据补充
				schoolInfo.value = {
					...fallbackTestData, // 以测试数据为基础
					...storedSchool, // 用本地存储数据覆盖
					prices: storedSchool.prices || fallbackTestData.prices,
					qrcodes: storedSchool.qrcodes || fallbackTestData.qrcodes
				};
				return true;
			}
			return false;
		} catch (e) {
			console.error('读取本地存储失败:', e);
			return false;
		}
	};

	// 生命周期
	onLoad(() => {
		loading.value = true;
		error.value = false;

		try {
			const hasData = fetchSelectedSchool();
			if (!hasData) {
				console.log('使用备用测试数据');
				error.value = true; // 本地无数据时显示错误状态（也可选择不显示错误，直接展示测试数据）
			}
		} catch (err) {
			console.error('数据加载异常:', err);
			error.value = true;
		} finally {
			loading.value = false;
		}
	});

	onShow(() => {
		try {
			fetchSelectedSchool();
		} catch (e) {
			console.error('刷新数据失败:', e);
		}
	});
</script>

<style scoped>
	/* 样式保持不变 */
	.container {
		padding: 30rpx;
		background-color: #fff;
		min-height: 100vh;
	}

	.loading-container,
	.error-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.loading-text,
	.error-text {
		font-size: 32rpx;
		color: #999;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}

	.desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 30rpx;
		white-space: pre-line;
	}

	.price-section,
	.qrcode-section {
		margin-bottom: 40rpx;
	}

	.price-title,
	.qrcode-title {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 20rpx;
		color: #333;
	}

	.price-item {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.qrcode-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.qrcode-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 45%;
		margin-bottom: 30rpx;
	}

	.qrcode-img {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 16rpx;
		border-radius: 10rpx;
	}

	.qrcode-desc {
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}
</style>